
import React, { useState, useEffect } from 'react';
import './My_list.css'
import axios from 'axios'
import { Input, Popup, Space, Switch } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
function Guan_Zhu() {
    const [gzcate, setgzCate] = useState([])
    const [gzlist, setList] = useState([])
    const [gzId, setGzId] = useState('')
    const [name, setName] = useState('')
    const navigate = useNavigate()
    const [visible1, setVisible1] = useState(false)
    const [type, setType] = useState('fens')
    useEffect(() => {
        getgzCate()
        getgzList()
    }, [])
    const getgzCate = async () => {
        let data = await axios.get('http://localhost:3000/guanzhu_Cate')
        console.log(data);
        setgzCate(data.data.data)
    }
    const getgzList = async () => {
        let data = await axios.get(`http://localhost:3000/guanzhu_List?gzId=${gzId}`)
        console.log(data);
        setList(data.data.data)
    }
    return (
        <div className='guan_zhu_box'>
            <div className="dingdan_detail_top">
                <div className="dingdan_detail_left">
                    <p>9:41</p>
                </div>
                <div className="dingdan_detail_right">
                    <h3 className='dingdan_detail_right_h3'>
                        <svg t="1739181732005" class="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4224" width="20" height="20"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="4225" fill="#2c2c2c"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="4226" fill="#2c2c2c"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="4227" fill="#2c2c2c"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="4228" fill="#2c2c2c"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="4229" fill="#2c2c2c"></path></svg>
                    </h3>
                    <h3 className='dingdan_detail_right_h31'>
                        <svg t="1739181875778" class="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8311" width="20" height="20"><path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z" p-id="8312" fill="#2c2c2c"></path></svg>
                    </h3>
                    <h3 className='dingdan_detail_right_h32'>
                        <svg t="1739182052804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="20" height="20"><path d="M984.2 434.8c-5-2.9-8.2-8.2-8.2-13.9v-99.3c0-53.6-43.9-97.5-97.5-97.5h-781C43.9 224 0 267.9 0 321.5v380.9C0 756.1 43.9 800 97.5 800h780.9c53.6 0 97.5-43.9 97.5-97.5v-99.3c0-5.8 3.2-11 8.2-13.9 23.8-13.9 39.8-39.7 39.8-69.2v-16c0.1-29.6-15.9-55.5-39.7-69.3zM912 702.5c0 12-6.2 19.9-9.9 23.6-3.7 3.7-11.7 9.9-23.6 9.9h-781c-11.9 0-19.9-6.2-23.6-9.9-3.7-3.7-9.9-11.7-9.9-23.6v-381c0-11.9 6.2-19.9 9.9-23.6 3.7-3.7 11.7-9.9 23.6-9.9h780.9c11.9 0 19.9 6.2 23.6 9.9 3.7 3.7 9.9 11.7 9.9 23.6v381z" p-id="9430" fill="#2c2c2c"></path><path d="M736 344v336c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V344c0-8.8 7.2-16 16-16h608c8.8 0 16 7.2 16 16z" p-id="9431" fill="#2c2c2c"></path></svg>
                    </h3>
                </div>
            </div>
            <div className="guan_zhu_box_list">
                <div className="guan_zhu_box_list_left" onClick={() =>{
                    navigate('/ding_detail')
                }}>
                    <svg t="1739244511321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4181" width="25" height="25"><path d="M393.390114 512.023536l347.948667-336.348468c20.50808-19.85828 20.50808-51.997258 0-71.792093-20.507056-19.826558-53.778834-19.826558-74.28589 0L281.990954 476.135164c-20.476357 19.826558-20.476357 51.981908 0 71.746044l385.061936 372.236839c10.285251 9.91379 23.728424 14.869662 37.173644 14.869662 13.446243 0 26.889417-4.956895 37.112246-14.901385 20.50808-19.826558 20.50808-51.919487 0-71.746044L393.390114 512.023536" p-id="4182"></path></svg>
                </div>
                {
                    gzcate.map((item, index) => {
                        return (
                            <div className="guan_zhu_box_list_right" key={index}>
                                <p style={{
                                    fontWeight: item._id == gzId ? '700' : '',
                                }}
                                    onClick={() => {
                                        setGzId(item._id)
                                        getgzList() //获取该分类下的所有文章
                                    }}
                                >
                                    {item.name}
                                </p>
                            </div>
                        )
                    })
                }
            </div>
            <div className="guan_zhu_box_Search">
                <div className="guan_zhu_box_Search_btn">
                    <Input
                        placeholder='搜索用户昵称或者备注'
                        value={name}
                        onChange={val => {
                            setName(val)
                        }}
                    />
                </div>
            </div>
            {/* <div className="guan_zhu_box_list_main">
                我的 

            </div> */}
            {
                gzlist.map((item, index) => {
                    const currentCategory = gzcate.find(item => item._id === gzId);
                    const btnType = currentCategory?.type || 'fens'; // 默认类型


                    return (
                        <div className="guan_zhu_box_list_main_item" key={index}>
                            <div className="guan_zhu_box_list_main_item_left">
                                <img src={item.img} alt="" width={50} height={50} />
                            </div>
                            <div className="guan_zhu_box_list_main_item_center">
                                <p>{item.name}</p>
                            </div>
                            <div className="guan_zhu_box_list_main_item_right">
                                {/* <p className='guan_zhu_box_list_main_item_right_hu'>
                                    {{
                                        fens: '互相关注',
                                        guanz: '已关注',
                                        peny: '私信'
                                    }[btnType]}
                                </p> */}
                                <p className={`guan_zhu_box_list_main_item_right_hu ${btnType}`}>
                                    {{
                                        fens: '互相关注',
                                        guanz: '已关注',
                                        peny: '私信'
                                    }[btnType]}
                                </p>
                            </div>
                            <div className="guan_zhu_box_list_main_item_last">
                                <p className='guan_zhu_box_list_main_item_right_geng' onClick={() => {
                                    setVisible1(true)
                                }}>
                                    <svg t="1739352435613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4219" width="30" height="30"><path d="M298.666667 586.666667a74.666667 74.666667 0 1 1 0-149.333334 74.666667 74.666667 0 0 1 0 149.333334z m213.333333 0a74.666667 74.666667 0 1 1 0-149.333334 74.666667 74.666667 0 0 1 0 149.333334z m213.333333 0a74.666667 74.666667 0 1 1 0-149.333334 74.666667 74.666667 0 0 1 0 149.333334z" fill="#bfbfbf" p-id="4220"></path></svg>
                                </p>
                            </div>
                        </div>
                    )
                })
            }
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
                bodyStyle={{ height: '35vh', borderRadius: '28px 28px 0 0', backgroundColor: '#f2f2f2' }}
            >
                <div className="tiebieguan_zhu">
                    <div className="tiebieguan_zhu_1_left">
                        <p>设置特别关注</p>
                    </div>
                    <div className="tiebieguan_zhu_1_left">
                        <p className='tiebieguan_zhu_1_left_Switch'>    <Switch /></p>
                    </div>
                </div>
                <div className="tiebieguan_zhu">
                    <div className="tiebieguan_zhu_1_left">
                        <p>在关注列表置顶</p>
                    </div>
                    <div className="tiebieguan_zhu_1_left">
                        <p className='tiebieguan_zhu_1_left_svg'>
                        <svg t="1739411653345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4196" width="30" height="30"><path d="M576 452.266667v422.4h-85.333333v-422.4l-89.6 89.6L341.333333 477.866667l192-192 192 192-59.733333 59.733333-89.6-85.333333z m213.333333-217.6h-512v-85.333334h512v85.333334z" fill="#ad8f42" p-id="4197"></path></svg>    
                        </p>
                    </div>
                </div>
                <div className="tiebieguan_zhu">
                    <div className="tiebieguan_zhu_1_left">
                        <p>取消关注</p>
                    </div>
                    <div className="tiebieguan_zhu_1_left">
                        <p className='tiebieguan_zhu_1_left_svg1'> 
                        <svg t="1739411799735" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5250" width="30" height="30"><path d="M767.3 661.9c3.2 6.8 10.1 11.6 18.2 11.6 10.7 0 19.5-8.4 20.1-19l6.2-0.1c-44.9-66.6-110.2-118.2-186.9-146 67.3-42.8 111.9-118.1 111.9-203.7 0-133.3-108-241.3-241.3-241.3s-241.3 108-241.3 241.3c0 85.5 44.4 160.5 111.4 203.4C233 555.7 134.5 674.4 115.9 818.2c-0.6 2.6-0.9 5.3-1 8.1 0 0.4-0.1 0.7-0.1 1.1h0.1c0.2 17.7 12.1 32.7 28.4 37.4 3 1.8 6.5 2.8 10.2 2.8h440.7v-0.8c0.8 0.1 1.7 0.2 2.6 0.2 11.1 0 20.1-9 20.1-20.1s-9-20.1-20.1-20.1c-1.7 0-3.3 0.2-4.9 0.6H157.3s3.5-21.2 7.1-38.6h-0.1c0.2-0.7 0.4-1.5 0.5-2.2 2.1-10 4.1-18.3 5.4-19.8C204.9 652.6 298.1 563.9 415 535.5v-1c0.5 0 1 0.1 1.6 0.1 12 0 21.7-9.7 21.7-21.7s-9.7-21.7-21.7-21.7c-0.5 0-1 0-1.6 0.1V489c-71-31-120.7-101.9-120.7-184.3 0-111.1 90-201.1 201.1-201.1s201.1 90 201.1 201.1c0 82.5-49.6 153.3-120.7 184.3v1.4c-11.7 0.6-21 10.2-21 22.1 0 11.9 9.3 21.5 21 22.1v0.9c77.7 18.9 145 64.4 191.5 126.4z m185 253.4l-67.9-67.8 67.6-67.6c7.5-7.5 7.5-19.6 0-27.1s-19.6-7.5-27.1 0l-67.6 67.6-67.6-67.6c-7.5-7.5-19.6-7.5-27.1 0s-7.5 19.6 0 27.1l67.6 67.6-67.8 67.8c-7.5 7.5-7.5 19.6 0 27.1s19.6 7.5 27.1 0l67.8-67.8 67.8 67.8c7.5 7.5 19.6 7.5 27.1 0 7.6-7.5 7.6-19.7 0.1-27.1z" p-id="5251" fill="#b3974f"></path></svg>
                        </p>
                    </div>
                </div>
                <div className="tiebieguan_zhu">
                    <div className="tiebieguan_zhu_1_left">
                        <p>设置备注名</p>
                    </div>
                    <div className="tiebieguan_zhu_1_left">
                        <p className='tiebieguan_zhu_1_left_svg3'> 
                        <svg t="1739412191859" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6276" width="30" height="30"><path d="M558.933333 490.666667L384 665.6l59.733333 59.733333 234.666667-234.666666L443.733333 256 384 315.733333l174.933333 174.933334z" fill="#444444" p-id="6277"></path></svg>
                        </p>
                    </div>
                </div>
            </Popup>
        </div>
    )
}

export default Guan_Zhu;